<template>
    <div class="wrap">
        <ul class="list">
            <li class="item">
                <div class="label">公司名</div>
                <div class="value">
                    <input type="text" v-model="companyName" class="input right-text" placeholder="请填写">
                </div>
            </li>
            <li class="item select-icon select-icon--right" @click="showTime('beginTime')">
                <div class="label"><span class="marker-icon">*</span>开始时间</div>
                <div class="value">
                    <div class="select-value">
                        <span class="select-default" v-if="!beginTime">请选择</span>
                        <span v-else>{{beginTime}}</span>
                    </div>
                </div>
            </li>
            <li class="item select-icon select-icon--right" @click="showTime('endTime')">
                <div class="label"><span class="marker-icon">*</span>结束时间</div>
                <div class="value">
                    <div class="select-value">
                        <span class="select-default" v-if="!endTime">请选择</span>
                        <span v-else>{{endTime}}</span>
                    </div>
                </div>
            </li>
            <li>
                <div class="textarea-wrap">
                    <div class="title">具体内容</div>
                    <textarea class="textarea" v-model="workContent" placeholder="请输入自己的工作经验或实习经验~"></textarea>
                </div>
            </li>
        </ul>
        <div class="theme-btn btn" @click="submit">保存</div>
        <van-action-sheet :show="visibleTime" @close="visibleTime = false">
            <van-datetime-picker
                type="date"
                :value="currentDate"
                @confirm="changeTime"
                @cancel="showTime"
                :min-date="minDate"
            />
        </van-action-sheet>
    </div>
</template>
<script>
import {cutTime} from '@/utils/filters';
export default {
    data () {
        return {
            visibleTime: false,
            companyName: null,
            beginTime: '',
            endTime: '',
            workContent: '',
            timeType: 'beginTime',
            currentDate: new Date().getTime(),
            minDate: new Date('1994-01-01').getTime(),
            id:''
        };
    },
    methods: {
        submit() {
            if(!this.beginTime){
                wx.showToast({
                    title: '开始不能为空',
                    icon: 'none',
                    duration: 2000,
                    mask: false,
                });
                return;
            }
            if(!this.endTime){
                wx.showToast({
                    title: '结束时间不能为空',
                    icon: 'none',
                    duration: 2000,
                    mask: false,
                });
                return;
            }
            if(+new Date(this.beginTime) - +new Date(this.endTime) >= 0){
                wx.showToast({
                    title: '结束时间不能小于开始时间',
                    icon: 'none',
                    duration: 2000,
                    mask: false,
                });
                return;
            }
            const {companyName,beginTime,endTime,workContent} = this;
            this.$api.saveEditWorkExperience({
                companyName,
                beginTime,
                endTime,
                workContent,
                id:this.id ? this.id : void 0
            }).then(res=>{
                if(res.code == 0){
                    wx.navigateBack({
                      delta: 1 //返回的页面数，如果 delta 大于现有页面数，则返回到首页,
                    });
                }
            });
        },
        changeTime(e) {
            this[this.timeType] = cutTime(e.mp.detail);
            this.visibleTime = false;
        },
        showTime(type) {
            this.timeType = type;
            if (this[type]) {
                this.currentDate = +new Date(this[type]);
            }
            this.visibleTime = !this.visibleTime;
        }
    },
    onLoad(e) {
        Object.assign(this.$data, this.$options.data());
        if(e.item){
            let item = JSON.parse(e.item);
            this.companyName = item.companyName;
            this.workContent = item.workContent;
            this.beginTime = item.beginTime;
            this.endTime = item.endTime;
            this.id = item.id;
        }
    }
}
</script>
<style lang="scss" scoped>
.wrap {
    position: relative;
    height: 100%;
}
// .list {
//     border-bottom: 10px solid $grey-bg;
// }
.item {
    display: flex;
    height: 40px;
    align-items: center;
    justify-content: space-between;
    padding: 0px 15px;
    box-sizing: border-box;
    font-size: 12px;
    border-bottom: 1px solid $grey-border-color;
}
.label {
    color: #40444C;
}
.marker-icon {
    color: $theme-color;
    margin-right: 5px;
}
.select-default {
    color: #C1C4C9;
}
.value {
    color: $color-text;
}
.right-text {
    text-align: right;
}
.select-value {
    span {
        padding-right: 20px;
    }
}
.textarea-wrap {
    padding: 15px;
}
.title {
    line-height: 24px;
    font-size: 13px;
    color: #40444C;
}
.textarea {
    width: 100%;
    height: 167px;
    border-radius: 4px;
    border: 1px solid $grey-border-color;
    padding: 10px 15px;
    box-sizing: border-box;
}
.upload-wrap {
    padding: 10px 15px;
}
.upload-tips {
    color: #C1C4C9;
    font-size: 12px;
    margin-bottom: 10px;
}
.upload-btn {
    width: 62px;
    height: 62px;
    text-align: center;
    color: #C1C4C9;
    border: 1px solid #C1C4C9;
    border-radius: 1px;
}
.upload-icon {
    font-size: 40px;
    display: block;
    /deep/.van-icon,.van-icon:before {
        display: block;
    }
}
.btn {
    position: absolute;
    bottom: 36px;
    left: 15px;
    right: 15px;
}
</style>